import React from 'react';
import VideoJS from '@/components/VideoJs';
import TitleBg from '../TitleBg';
import styles from './index.less';

export default function (props: any) {
  const { videoCondition } = props;

  return (
    <div className={styles.videoBox}>
      {videoCondition?.map((item: any, index: number) => {
        const videoJsOptions = {
          autoplay: true,
          controls: true,
          responsive: true,
          // fluid: true,
          width: 283,
          height: 210,
          sources: [
            {
              src: item?.m3u8Url,
              type: 'application/x-mpegURL',
            },
          ],
        };
        return index < 4 ? (
          <div className={styles.videoLi} key={item.id}>
            <TitleBg>
              <span>{item.name}</span>
            </TitleBg>
            <div className={`${styles.videoBox} bgColor`}>
              <VideoJS options={videoJsOptions} />
            </div>
          </div>
        ) : null;
      })}
    </div>
  );
}
